<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<title>骰子游戏</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-family: Arial, "Microsoft YaHei";
			}
			
			body {
				background: url(../images/takeGame/bj.jpg) no-repeat;
				background-size: 100% 100%;
				height: 100vh;
				overflow: scroll;
			}
			
			ul {
				list-style: none;
			}
			/*** 用户名  ***/
			
			#header {
				position: relative;
				height: 8%;
				width: 100%;
				background: #422143;
				border-bottom: .1rem solid #993399;
			}
			
			.head {
				vertical-align: middle;
				width: 2rem;
				height: 2rem;
				margin: .2rem;
				border-radius: .3rem;
			}
			
			.username {
				width: 45%;
				left: 16%;
				background-size: 100% 100%;
			}
			
			.balance {
				vertical-align: middle;
				width: 12%;
			}
			
			.someMoney {
				width: 20%;
				right: .5rem;
				background-size: 100% 100%;
			}
			
			.username,
			.someMoney {
				display: inline-block;
				height: 1.6rem;
				line-height: 1.6rem;
				text-align: center;
				color: #fdfeff;
				font-size: .8rem;
				background: #a415a9;
				border-radius: .3rem;
			}
			/* 骰子展示 */
			
			#contentShow {
				position: relative;
				background: url(../images/homePage/page.png);
				background-size: 100% 100%;
				height: 10rem;
				margin-top: .5rem;
			}
			/* 骰子 */
			
			.shaizi1 {
				top: 10%;
				left: 40%;
				position: absolute;
				width: 18%;
			}
			
			.textCount {
				position: absolute;
				bottom: 2rem;
				margin-left: 10%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				width: 80%;
			}
			
			.countDown {
				left: 12%;
				background: #641367;
				background-size: 100% 100%;
				line-height: 2.2rem;
			}
			
			.chip {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				background: #641367;
				background-size: 100% 100%;
			}
			
			.countDown,
			.chip {
				text-align: center;
				width: 30%;
				font-size: .7rem;
				bottom: .8rem;
				height: 2.2rem;
				color: #b7bcc0;
				border-radius: .2rem;
			}
			
			.doubleText {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
			}
			
			.keep,
			.explain {
				background: #641367;
				width: 3rem;
				font-size: .6rem;
				color: #b7bcc0;
				text-align: center;
				background-size: 100% 100%;
				border-radius: .2rem;
				padding: .1rem 0;
			}
			
			.moneySpan {
				position: absolute;
				color: white;
				top: 10px;
				right: 30px;
			}
			
			.mian {
				width: 120%;
				margin-left: -10%;
			}
			/* 押注记录 */
			/*.chipDiv {
				position: absolute;
				width: 4.1rem;
				z-index: 1;
				background: black;
				opacity: .6;
				top: 2.2rem;
				border-radius: .5rem;
				line-height: 1.2rem;
			}*/
			/*** 公告 ***/
			
			#gg {
				/*position: relative;*/
				background: #422143;
				padding: .3rem;
				border-top: .1rem solid #5e285b;
				border-bottom: .1rem solid #5e285b;
				margin-top: 1rem;
			}
			
			#gg .laba {
				width: 1.5rem;
				height: 1.2rem;
			}
			
			#gg .note {
				display: inline-block;
				width: 85%;
				background: #a415a9;
				background-size: 100% 100%;
				height: 1.7rem;
				line-height: 1.5rem;
				border-radius: .2rem;
				margin-left: .2rem;
			}
			
			#gg>img {
				/*width: 100%;*/
			}
			
			.note marquee {
				font-size: .7rem;
				color: white;
				padding-left: 2vw;
			}
			
			.big,
			.small {
				width: 34%;
			}
			/* 投注内容区 */
			
			.startText {
				font-size: 1.2rem;
				color: #f74cf7;
				text-align: center;
				padding: .4rem 0;
				border-bottom: 1px solid #c368c3;
			}
			
			.startText img {
				width: 5rem;
				height: 1.25rem;
				vertical-align: middle;
			}
			
			#guessBigWrapper {
				margin: .5rem;
				padding-bottom: .5rem;
			}
			
			.guessBigSmall ul {
				display: flex;
				justify-content: space-between;
			}
			
			.publicTopBtm li {
				border: 1px solid #6b276c;
				width: 47%;
				border-radius: .5rem;
				font-size: .7rem;
				color: #c349c4;
				padding: 4vw 1vw;
				background: #2b132b;
			}
			
			.publicTopBtm li span:first-child {
				border: 1px solid #a73aa7;
				border-radius: 50%;
				padding: .3rem .4rem;
				font-size: .9rem;
			}
			
			.publicTopBtm li span:last-child {
				margin-left: 3rem;
			}
			
			.guessOther ul {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			
			.guessOther li span:first-child {
				border: none
			}
			
			.guessOther li {
				width: 28%;
				background: #2b132b;
				/*margin-top: .5rem;*/
				margin-top: 1rem;
			}
			
			.guessOther li span:last-child {
				margin-left: 1.25rem;
			}
			
			/*#footer {
				display: flex;
				justify-content: space-between;
				width: 94%;
				margin: 0 auto;
				margin-bottom: 5vh;
			}
			
			#footer img {
				width: 3rem;
				height: 2rem;
			}*/
			
			.totalNumber {
				display: inline-block;
				background: #220f22;
				font-size: 0;
				border: 1px solid #b232a4;
				border-radius: .5rem;
			}
			
			.input-number {
				/*width: 40px;*/
				/*padding: 0 12px;*/
				vertical-align: top;
				text-align: center;
				outline: none;
				background: #7a0975;
				border: none;
				color: #ff76ff;
			}
			
			.input-number,
			.input-number-decrement,
			.input-number-increment {
				width: 3rem;
				height: 2rem;
				user-select: none;
				font-size: .8rem;
			}
			
			.input-number-decrement,
			.input-number-increment {
				display: inline-block;
				line-height: 38px;
				color: #fff;
				text-align: center;
				font-weight: bold;
				/*cursor: pointer;*/
			}
			
			/*#guessBigWrapper li:hover {
				box-shadow: 0 0 .5rem #f74cf7;
			}*/
			/* 筹码大小选择 */
			
			#disGray {
				position: absolute;
				top: 6rem;
				left: 5%;
				width: 90%;
				margin: 0 auto;
				z-index: 10;
				display: none;
			}
			
			#disGray ul {
				text-align: center;
				padding: .2rem 4vw;
			}
			
			#disGray ul li img {
				width: 3rem;
			}
			
			#disGray .mengban {
				position: absolute;
				top: -0.5rem;
				left: 0;
				background: black;
				opacity: .6;
				width: 100%;
				height: 12rem;
				border-radius: 1rem;
				z-index: -1;
			}
			
			#disGray .disGrayBtn {
				background: #0deeed;
				border: none;
				color: #eaf8fa;
				width: 8rem;
				height: 1.8rem;
				text-align: center;
				border-radius: .5rem;
				font-size: .7rem;
				margin: .5rem auto;
				/*margin-top: 1rem;*/
				margin-left: 25vw;
				outline: none;
			}
			
			.close_p {
				text-align: center;
				font-size: 0;
			}
			
			.close {
				/*display: inline-block;*/
				/*text-align: center;*/
				color: #FFFFFF;
				font-size: .6rem;
				text-decoration: underline;
			}
		</style>
	</head>

	<body>
		<header id="header">
			<img class="head" src="../images/homePage/2.png" alt="">
			<div class="username">
				<span>用户名</span>
			</div>
			<img class="balance" src="../images/homePage/balance1.png" alt="">
			<div class="someMoney">
				<span>50</span>
			</div>
		</header>
		<section id="contentShow">
			<img class="shaizi1" src="../images/homePage/sieve1.png" alt="">
			<section class="textCount">
				<div class="countDown">
					倒计时：
					<span class="countDownSpan">60</span>
				</div>
				<div style="font-size: .6rem" class="chip">
					<span>本次押注：0</span>
					<span>筹码数:0</span>
					<!--<div class="chipDiv">暂无押注</div>-->
				</div>
				<section class="doubleText">
					<div class="keep">
						<span>历史记录</span>
					</div>
					<div class="explain">
						<span>游戏说明</span>
					</div>
				</section>
			</section>
		</section>
		<div id="gg">
			<img class="laba" src="../images/homePage/voice.png" alt="">
			<div class="note">
				<marquee behavior="" direction="">这是一条公告</marquee>
			</div>
		</div>
		<!-- 投注内容区 -->
		<div style="font-size: .7rem;color: white;border: none;" class="startText">
			<img src="../images/takeGame/leftStat.png" />
			<span style="margin: 0 .4rem;">本期请您开始投注</span>
			<img src="../images/takeGame/rightStart.png" />
		</div>
		<section id="guessBigWrapper">
			<div class="guessBigSmall publicTopBtm">
				<ul>
					<li>
						<span>大</span>
						<span>1赔1.9</span>
					</li>
					<li>
						<span>小</span>
						<span>1赔1.9</span>
					</li>
				</ul>
			</div>
			<div class="guessOther publicTopBtm">
				<ul>
					<li>
						<span>1</span>
						<span>1赔5</span>
					</li>
					<li>
						<span>2</span>
						<span>1赔5</span>
					</li>
					<li>
						<span>3</span>
						<span>1赔5</span>
					</li>
					<li>
						<span>4</span>
						<span>1赔5</span>
					</li>
					<li>
						<span>5</span>
						<span>1赔5</span>
					</li>
					<li>
						<span>6</span>
						<span>1赔5</span>
					</li>
				</ul>
			</div>
		</section>
		<!-- 下注 -->
		<!-- <div id="footer">
			<img src="../images/takeGame/xz.png" alt="下注" />
			<div class="totalNumber">
				<span class="input-number-decrement">–</span>
				<input class="input-number" type="text" value="1" min="1">
				<span class="input-number-increment">+</span>
			</div>
			<img src="../images/takeGame/ks.png" alt="开始" />
		</div> -->
		<!-- 筹码框 -->
		<div id="disGray">
			<ul>
				<li class="imgs">
					<!-- <img num='10' src="__PUBLIC__/Home/images/sieveImg/10.png" alt="">
					<img num='20' src="__PUBLIC__/Home/images/sieveImg/20.png" alt="">
					<img num='50' src="__PUBLIC__/Home/images/sieveImg/50.png" alt="">
					<img num='100' src="__PUBLIC__/Home/images/sieveImg/100.png" alt="">
					<img num='300' src="__PUBLIC__/Home/images/sieveImg/300.png" alt="">
					<img num='500' src="__PUBLIC__/Home/images/sieveImg/500.png" alt="">
					<img num='1000' src="__PUBLIC__/Home/images/sieveImg/1000.png" alt="">
					<img num='2000' src="__PUBLIC__/Home/images/sieveImg/2000.png" alt=""> -->
					<img num='10' src="../images/sieveImg/10.png" alt="">
					<img num='20' src="../images/sieveImg/20.png" alt="">
					<img num='50' src="../images/sieveImg/50.png" alt="">
					<img num='100' src="../images/sieveImg/100.png" alt="">
					<img num='300' src="../images/sieveImg/300.png" alt="">
					<img num='500' src="../images/sieveImg/500.png" alt="">
					<img num='1000' src="../images/sieveImg/1000.png" alt="">
					<img num='2000' src="../images/sieveImg/2000.png" alt="">
				</li>
			</ul>
			<button class="disGrayBtn">请选择您的下注金额</button>
			<p class="close_p"><span class="close">关闭</span></p>
			<div class="mengban"></div>
		</div>
	</body>
	<script src="../js/jquery-3.2.1.min.js"></script>
	<script src="../js/publicAlert.js"></script>
	<script type="text/javascript">
		// 设置动态fontSize
		!(function(doc, win) {
			var docEle = doc.documentElement,
				evt = "onorientationchange" in window ? "orientationchange" : "resize",
				fn = function() {
					var width = docEle.clientWidth;
					width && (docEle.style.fontSize = 20 * (width / 375) + "px");
				};
			win.addEventListener(evt, fn, false);
			doc.addEventListener("DOMContentLoaded", fn, false);
		}(document, window));

		// 数量加减
		(function() {

			window.inputNumber = function(el) {

				var min = el.attr('min') || false;
				var max = el.attr('max') || false;

				var els = {};

				els.dec = el.prev();
				els.inc = el.next();

				el.each(function() {
					init($(this));
				});

				function init(el) {

					els.dec.on('click', decrement);
					els.inc.on('click', increment);

					function decrement() {
						var value = el[0].value;
						value--;
						if(!min || value >= min) {
							el[0].value = value;
						}
					}

					function increment() {
						var value = el[0].value;
						value++;
						if(!max || value <= max) {
							el[0].value = value++;
						}
					}
				}
			}
		})();
		inputNumber($('.input-number'));

		// 筛子动画效果
		var seconds;
		var num1;
		var bool = true;
		var timer = setInterval(function() {
			seconds = new Date().getSeconds();
			if(60 - seconds >= 50 && 60 - seconds <= 60) {
				//开始转动 停止正在押注的活动
				$('#disGray').slideUp();
				bool = true;
				if(bool == true) {
					console.log('开启筛子定时器');
					// 筛子动画 计时器
					shaiziTimer = setInterval(function() {
						if(seconds >= 10) {
							clearInterval(shaiziTimer);
//							animation_result();
						} else {
							num1 = random();
							$('.shaizi1').attr('src', "../images/homePage/sieve" + num1 + ".png");
						}
					}, 100);
				}
			}
			if(60 - seconds === 49){
				console.log(num1)
				console.log('骰子点数' + num1)
			}
			// 改变倒计时
			$('.countDownSpan').html(60 - seconds);
		}, 1000);
		// 随机函数
		function random() {
			return Math.floor(Math.random() * 6 + 1)
		}
		
		for(var i = 0; i < $('#guessBigWrapper li').length; i++) {
			$('#guessBigWrapper li').eq(i).attr('num', i);
		}
		//  点击显示边框
		// var upper;
		// $('#guessBigWrapper li').click(function() {
		// 	$('#guessBigWrapper li').eq(upper).css('box-shadow','0 0 0 #f74cf7');
		// 	$(this).css('box-shadow', '0 0 .5rem #f74cf7');
		// 	upper = $(this).attr('num');
		// });

		// 点击筹码大小
		for(var i = 0; i < $('#disGray li.imgs img').length; i++) {
			$('#disGray li img').eq(i).click(function() {
				//存储筹码大小 并关闭筹码框
				localStorage.setItem('chip', $(this).attr('num'));
				$('#disGray').slideUp();
				bool = true;
				// p();
				// 存储 本次结果
				var a, b;
				a = localStorage.getItem('guess_spot');
				b = localStorage.getItem('chip');
				alert('押注的num='+a+',大小'+b);
			    // addrecharge(b,a);
				// bool = true;
			})
		}
		// 点击显示筹码框
			$('#guessBigWrapper li').click(function () {
				if(seconds <= 10 && seconds >= 0) {
					// 不在押注时间内
					publicAlert("请等待开注！");
				} else if(bool == true){
					localStorage.setItem('guess_spot', $(this).attr('num'));
					$('#disGray').slideDown();
					bool = false;
				}
			})
			// 关闭筹码框
			$('.close').click(function() {
				$('#disGray').slideUp()
				bool = true
			});
	</script>

</html>